<template>
  <div class="wfull">
    <ZgDialog v-model="visible" title="设置字典选项" @ok="onOk">
      <draggable
        v-model="list"
        handle=".sortHandler"
        chosenClass="chosen"
        forceFallback="true"
        animation="1000"
        @start="onStart"
        @end="onEnd">
        <transition-group>
          <div class="flx-s pd5" v-for="(obj,i) in list" :key="`obj${i}`">
            <i class="fa fa-arrows mr8 info cpt sortHandler"></i>
            <ZgInput class="mr10" placeholder="选项名称" v-model="obj.name"></ZgInput>
            <ZgInput class="mr10" placeholder="选项编码" v-model="obj.code"></ZgInput>
            <ZgSwitch class="mr10" v-model="obj.isUse" :text="['启','禁']"></ZgSwitch>
            <ZgButton icon="plus" size="small" class="mr10" @click="plus(i)"></ZgButton>
            <ZgButton icon="minus" size="small" @click="minus(i)"></ZgButton>
          </div>
        </transition-group>
      </draggable>
    </ZgDialog>
    <a-tag :color="obj.isUse?'blue':'#999'" v-for="(obj,i) in subList" :key="`tag${i}`">{{ obj.name }}</a-tag>
    <a @click="visible=true">
      <span v-if="total>0">共{{ total }}个选项</span>
      <span v-else>设置选项</span>
    </a>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable
  },
  props: {
    code: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      visible: false,
      loading: false,
      total: 0,
      list: []
    }
  },
  mounted () {
    this.search()
  },
  watch: {
    code () {
      this.search()
    }
  },
  computed: {
    subList () {
      return this.list.filter((t, i) => {
        return t.name.length > 0 && i < 10
      })
    }
  },
  methods: {
    search () {
      if (!this.code || this.code.length === 0) {
        return
      }
      this.loading = true
      const timer = setTimeout(() => {
        this.loading = false
      }, 5000)
      this.$http.get('/zg-system/dic/list', { code: this.code }, data => {
        this.list = data
        this.total = data.length
        if (data.length === 0) {
          this.list.push({ sort: 0, name: '', code: '', isUse: true })
        }
        clearTimeout(timer)
        this.loading = false
      })
    },
    onOk () {
      if (this.list.some(t => {
        return t.name.length === 0 || t.code.length === 0
      })) {
        this.$warning({ title: '每个选项的名称和编码都不能为空' })
        return
      }

      const nameArr = this.list.map(t => {
        return t.name
      })
      const nameSet = Array.from(new Set(nameArr))
      if (nameArr.length > nameSet.length) {
        this.$warning({ title: '选项名称存在重复的情况' })
        return
      }

      const codeArr = this.list.map(t => {
        return t.code
      })
      const codeSet = Array.from(new Set(codeArr))
      if (codeArr.length > codeSet.length) {
        this.$warning({ title: '选项编码存在重复的情况' })
        return
      }
      this.$http.post('/zg-system/dic/config', {
        code: this.code,
        list: this.list
      }, () => {
        this.visible = false
        this.search()
      })
    },
    plus (i) {
      this.list.splice(i + 1, 0, { sort: 0, name: '', code: '', isUse: true })
    },
    minus (i) {
      if (this.list.length === 1) {
        this.$warning({ title: '至少保留一条记录' })
        return
      }
      this.list.splice(i, 1)
    },
    onStart () {},
    onEnd () {
      this.list = this.list.map((t, i) => {
        t.sort = i
        return t
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .chosen{
    border:solid 1px #096daf;
  }
</style>
